<template>
  <div class='line-chart'>
    <div class='line-chart-title'>
      <span class='title-text'>话务时段监控</span>
    </div>
    <div class='line-chart-content'>
      <v-chart
      ref="chartRef"
      :option='option'
      :update-options="updateOptions"
      autoresize
      @mousemove='handleMousemove'
      @mouseout='handleMouseout'
      />
    </div>
  </div>
</template>
<script setup>
import { BarChart, LineChart } from 'echarts/charts';
import {
  GridComponent,
  LegendComponent,
  TooltipComponent,
  MarkLineComponent
} from 'echarts/components';
import * as echarts from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import { ref, shallowRef, nextTick, watch } from 'vue';
const Carousel = ref(false)
const chartRef = shallowRef(null)
const updateOptions = ref({
  replaceMerge: ['xAxis', 'series'],
  lazyUpdate: false,
  notMerge: false
})
echarts.use([
  BarChart,
  LineChart,
  MarkLineComponent,
  CanvasRenderer,
  GridComponent,
  LegendComponent,
  TooltipComponent
])
const props = defineProps(['chartValue', 'currentMonth', 'historyMonth'])
const option = ref({
  grid: {
    left: '0%',
    right: '0%',
    bottom: '4%',
    containLabel: true
  },
  legend: {
    type: 'plain',
    itemGap: 20,
    itemWidth: 40,
    textStyle: {
      color: '#ffffff',
      fontSize: 14
    },
    data: [
	    {
		    name: '呼入量',
		    icon: 'roundRect'
	    },
      {
        name: '呼入量',
        icon: 'roundRect'
      },
      {
        name: '接通量',
        icon:'roundRect'
      },
      {
        name: '呼入量_昨日',
        icon:'inherit',
        lineStyle: {
          color: '#F79F18'
        }
      },
      {
        name: '接通量_昨日',
        icon:'inherit',
        lineStyle: {
          color: '#EA4745'
        }
      }
    ]
  },
  tooltip: {
    trigger: 'axis',
    backgroundColor: 'rgba(0,0,0,.5)',
    borderColor: 'rgba(0,0,0,.5)',
    textStyle: {
      color: '#ffffff',
      fontSize: 18
    },
    axisPointer: {
      type: 'shadow',
      crossStyle: {
        color: '#999'
      }
    }
  },
  xAxis: {
    type: 'category',
    axisLabel: {
      fontSize: 18,
      color: '#ffffff'
    },
    data: [
      '00:00',
      '01:00',
      '02:00',
      '03:00',
      '04:00',
      '05:00',
      '06:00',
      '07:00',
      '08:00',
      '09:00',
      '10:00',
      '11:00',
      '12:00',
      '13:00',
      '14:00',
      '15:00',
      '16:00',
      '17:00',
      '18:00',
      '19:00',
      '20:00',
      '21:00',
      '22:00',
      '23:00',
      '24:00',
    ]
  },
  yAxis: {
    type: 'value',
    axisLabel: {
      fontSize: 18,
      color: '#ffffff'
    },
  },
  series: [
    {
      // 呼入量
      name: '呼入量',
      id: 'incomingCall',
      data: [],
      type: 'bar',
      itemStyle: {
        color: '#0D7CDE'
      },
      markLine: {
        label: {
          show: true,
          position: 'end',
          distance: -120,
          formatter: '历史峰值',
          fontWeight: 'normal',
          color: '#f5d305',
          fontSize: 18
        },
	      lineStyle: {
					color: '#f5d305'
	      },
        data: [{ type: 'max', yAxis: 600 }]
      }
    },
    {
      // 接通量
      name: '接通量',
      id: 'quantityAmount',
      data: [],
      type: 'bar',
      itemStyle: {
        color: '#73AF0F'
      },
      markLine: {
        label: {
          show: true,
          position: 'end',
          distance: -120,
          formatter: '当月峰值',
          fontWeight: 'normal',
          color: '#73AF0F',
          fontSize: 18
        },
        data: [{ type: 'max', yAxis: 700 }]
      }
    },
    {
      // 呼入量_昨日
      name: '呼入量_昨日',
      id: 'yesIncomingCall',
      type: 'line',
      smooth: true,
      symbol: 'none',
      itemStyle: {
        color: '#F79F18'
      },
      lineStyle: {
        width: 4
      },
      data: []
    },
    {
      // 接通量_昨日
      name: '接通量_昨日',
      id: 'yesQuantityAmount',
      type: 'line',
      smooth: true,
      symbol: 'none',
      itemStyle: {
        color: '#EA4745'
      },
      lineStyle: {
        width: 4
      },
      data: []
    }
  ]
})
// 监听父组件传参动态设置图表数据
watch(() => props.chartValue, (newValue) => {
  option.value.xAxis.data = newValue.timerange
  option.value.series[0].data = newValue.incomingCall
  option.value.series[1].data = newValue.quantityAmount
  option.value.series[2].data = newValue.yesIncomingCall
  option.value.series[3].data = newValue.yesQuantityAmount
  option.value.series[0].markLine.data[0].yAxis = Math.floor(props.historyMonth * 1)
  option.value.series[1].markLine.data[0].yAxis = Math.floor(props.currentMonth * 1)
  chartRef.value.setOption(option.value)
  handleCarousel()
}, { deep: true })
const handleCarousel = () => {
  if (!Carousel.value) {
    Carousel.value = true
    nextTick(() => {
      // 开启自动轮播
      window.tools.loopShowTooltip(chartRef.value.chart, option.value, {
        interval: 2000, // 轮播时间间隔，单位毫秒，默认为2000
        loopSeries: true, // 是否循环所有series的tooltip，默认为false
        seriesIndex: 0 // 默认为0，指定某个系列（option中的series索引）循环显示tooltip
      });
    })
  }
}
function handleMousemove () {
  window.tools.clearLoop && window.tools.clearLoop(); // 暂停轮播
}
function handleMouseout () {
  window.tools.loopShowTooltip(chartRef.value.chart, option.value, {
      interval: 2000,
      loopSeries: true,
      seriesIndex: 0
    }); // 恢复轮播
}
</script>
<style lang='less'>
.line-chart {
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding: 12px 40px;
  .line-chart-title {
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    .title-text {
      font-size: 28px;
      color: #ffffff;
    }
  }
  .line-chart-content {
    width: 100%;
    flex: 1 0 auto;
  }
}
</style>
